<template>
    <div class="CampusBinhai">
      <div class="top">温州理工滨海校区</div>
      <input type="text" v-model="text" > <button @click="search">搜索</button>
      <div>学生信息</div>
      <div>学号：{{ id }}</div>
      <div>姓名：{{ name }}</div>
      <div>年龄：{{ age }}</div>
      <div>专业：{{ grade }}</div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'CampusBinhai',
    data(){
        return{
            text:'',
            personList:[{id:'1',name:'zzz',age:'12',grade:'3'},{id:'2',name:'zxxxzz',age:'13',grade:'3'},{id:'3',name:'zzz111',age:'22',grade:'3'}],
            id:'',
            name:'',
            age:'',
            grade:''
            
        }
    },
    methods:{
        search(){  
            for(var i =0;i<this.personList.length;i++){
                if(this.personList[i].id==this.text){
                    this.id=this.personList[i].id
                    this.name=this.personList[i].name
                    this.age=this.personList[i].age
                    this.grade=this.personList[i].grade
                    return
                }
            }
            
        }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  
  </style>
  